<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮</title>
</head>
<body>
<button class="a">按钮</button>
<div class="g">
    <button class="b">按钮1</button>
    <button class="c">按钮2</button>
    <button class="d">按钮3</button>
    <button class="e">按钮4</button>
    <button class="f">按钮5</button>
</div>
<div class="h">
    <button class="i">按钮大小1</button>
    <button class="j">按钮大小2</button>
    <button class="k">按钮大小3</button>
    <button class="l">按钮大小4</button>
    <button class="m">按钮大小5</button>
</div>
<div class="n">
    <button class="o">按钮圆角</button>
    <button class="p">按钮圆角</button>
    <button class="q">按钮圆角</button>
    <button class="r">按钮圆角</button>
    <button class="s">按钮圆角</button>
</div>
<button class="t">按钮悬停</button>
<button class="u">按钮阴影</button>
<button class="v">禁用按钮</button>
<div class="w">
    <button class="x">按钮宽度</button>
    <button class="y">按钮宽度</button>
    <button class="z">按钮宽度</button>
</div>
<button class="a1">动画</button>
<button class="b1">波纹</button>
<button class="c1">压下
</button>
<style>

    .c1{
        background-color: green;
        font-size: 30px;

        position: relative;

        box-shadow: 0 9px #999;
    }
    .c1:active{

        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }


    .b1:after{
        content: "";
        opacity: 0;
        transition:all 1s;
        padding-top: 300%;
        padding-left:350%;
        margin-left:-20px !important;
        margin-top: -120%;
        display: block;
        position: absolute;
        background: #90EE90;
    }
    .b1:active:after{
        padding: 0;
        margin: 0;
        opacity: 1;
        transition: 0s

    }
    .b1{
        background-color: green;
        font-size: 30px;
        width: 200px;
        overflow: hidden; position: relative;
    }
    .a1{
        width: 200px;
        background-color: green;
        font-size: 30px;
        transition: 10s;
    }
    .a1:hover::after{
        content: ">>";
    }

    .x{
        width: 500px;
    }
    .y{
        width: 50%;
    }
    .z{
        width: 100%;
    }

    .w button{
        background-color: green;
        font-size:30px;
        display: block !important;
    }
    .v{
        background-color: green;
        opacity: 0.7;
        cursor: not-allowed;
        font-size: 30px;
    }
    .u{
        background-color: green;
        transition: 1s;
        font-size: 30px;

    }
    .u:hover{
        box-shadow:10px  10px 5px #888888;
    }
    .t{
        background-color: green;
        font-size: 30px;
        transition: 1s;
    }
    .t:hover{
        background-color: white;
        border:1px solid green;
        color:black;
        border-radius: 10px;
    }
    .n button{
        background-color: green;
        font-size: 30px;
    }
    .o{
        border-radius: 10px;
    }
    .p{
        border-radius: 20px;

    }
    .q{
        border-radius: 30px;
    }
    .r{
        border-radius: 40px;
    }
    .s{
        border-radius: 50%;
    }
    .h button{
        background-color: green;
    }
    .i{
        font-size: 16px;
    }
    .j{
        font-size: 26px;
    }
    .k{
        font-size: 50px;
    }
    .l{
        font-size:100px
    }
    .m{
        font-size:200px
    }

    .g button,.h button,.a,.n button,.t,.u,.v,.w button,.a1,.b1,.c1{
        border: none;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;

        margin: 4px 2px;
        cursor: pointer;
        color: white;


    }
    .b{background-color: green}
    .c{background-color: blue}
    .d{background-color: red}
    .e{background-color: gray;color:black}
    .f{background-color: black}


</style>
</body>

</html>